<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>LTMALL-地址管理</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
		<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
		<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/css/public.css" media="all">
		<link rel="stylesheet" type="text/css" href="/css/personal.css"/>
		<link rel="stylesheet" type="text/css" href="/css/mygxin.css" />
		<link rel="stylesheet" type="text/css" href="/css/myBill.css" />
		<style>
			.personalImg{
				text-align: center;
				height: auto;
				width: auto;
				white-space: normal;
				max-height: 80px;
				max-width: 90px;
				border-radius:50%;
				border: 1px solid salmon;
			}
		</style>
	</head>
	<body>
	<th:block th:include="header"/>

		<!------------------------------Bott------------------------------>
	<div class="Bott">
		<div class="wrapper clearfix">
			<th: block th:include="personalHeader"/>
			<div class="you fl">
				<div class="my clearfix">
					<h2 class="fl">地址管理</h2>
					<a href="#2" id="addAddress"><img src="/img/jia.png"/></a>
				</div>
				<div th:each="currentMemberAddress:${currentMemberAddress}">
					<div class="dkuang clearfix deng">
						<p class="one fl" ></p>
						<div  class="clearfix">
							<div class="fl vewwl">

							</div>
						</div>
						<div class="word clearfix">
							<ul class="fl clearfix">

							</ul>
							<p class="fr">是否默认：<span th:text="${currentMemberAddress.defaultAddress}"></span></p>
						</div>

							<div class="shohou clearfix" >
								<p class="fl">
									<a style="width: auto" th:text="${currentMemberAddress.name}"></a>
									<a style="width: auto" th:text="${currentMemberAddress.phone}"></a>
									<a style="width: auto" th:text="${currentMemberAddress.province}+${currentMemberAddress.city}+${currentMemberAddress.area}"></a>
									<a style="width: auto" th:text="${currentMemberAddress.address}"></a>
								</p>
								<p class="fr">
									<input type="hidden" th:value="${currentMemberAddress.id}">
									<a class="delAddress">删除</a>
									<a class="updateAddress">修改</a>
									<a class="setDefault">设为默认</a>
								</p>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<th:block th:include="end"/>



	<!--定义添加新地址时弹出窗口的模版-->
	<script id="addressTemplate" type="text/html">
		<form class="layui-form" lay-filter="addressForm">

			<div class="layui-form-item" id="area-picker">
				<label class="layui-form-label" style="width: 100px;margin: 0px 0px 0px -20px">请选择省:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="province" class="province-selector"  lay-filter="province-1">
						<option value="">请选择省</option>
					</select>
				</div>
				<label class="layui-form-label" >市:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="city" class="city-selector"  lay-filter="city-1">
						<option value="">请选择市</option>
					</select>
				</div>
				<label class="layui-form-label">区:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="area" class="county-selector"  lay-filter="county-1">
						<option value="">请选择区</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">

				<label class="layui-form-label">收件人:</label>
				<div class="layui-input-inline">
					<div class="layui-input-inline">
						<input id="name" type="text" name="name" class="layui-input demo-phone" >
					</div>
				</div>

				<label class="layui-form-label" style="width: 100px;margin: 0px 0px 0px -8px">联系方式:</label>
				<div class="layui-input-inline">
					<input id="phone" type="text" name="phone" autocomplete="off"  class="layui-input" >
				</div>

				<label class="layui-form-label" style="width: 100px;margin: 0px 0px 0px -10px">详细地址:</label>
				<div class="layui-input-inline">
					<input id="address" type="text" name="address" autocomplete="off"  class="layui-input">
				</div>

			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="hidden" value="否" name="superadmin">
					<button id="saveBtn" type="button" class="layui-btn" style="position: center">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary" style="position: center">重置</button>
				</div>
			</div>
		</form>
	</script>

		<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/user.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery.magnific-popup.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/wow.min.js"></script>

	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script>
		//配置插件目录
		layui.config({
			base: '/mods/'
			, version: '1.0'
		});
		layui.use([ 'form', 'table', 'layer','laytpl','layarea' ], function() {
			var $ = layui.jquery, form = layui.form;
			var table = layui.table;
			var layer = layui.layer;
			var layarea = layui.layarea;
			var laytpl = layui.laytpl;

			//给添加图标绑定事件
			$("body").on("click", "#addAddress", function () {
				layer.open({
					type: 1,
					title: "新增地址",
					area: ["1000px", "300px"],
					content: $("#addressTemplate").html(),
				});
				layarea.render({
					elem: '#area-picker',
					change: function (res) {
						//选择结果
						console.log(res);
					}
				});
			});

			//给修改按钮绑定事件
			$(".updateAddress").on("click",function(){
				$.post("/memberAddress/selectMemberAddressByAddressId?addressId="+$(this).prev().prev().val(),function (memberAddress){
					layer.open({
						type: 1,
						title: "新增地址",
						area: ["1000px", "300px"],
						content: $("#addressTemplate").html(),
					});
					form.render();
					layarea.render({
						elem: '#area-picker',
						data: {
						    province: memberAddress.province,
						    city: memberAddress.city,
						    county: memberAddress.area,
						},
						change: function (res) {
							//选择结果
							console.log(res);
						}
					});
					form.render();
					form.val("addressForm",memberAddress);
				});
			});

			//给设为默认按钮绑定事件
			$(".setDefault").on("click", function() {
			   $.post("/memberAddress/updateMemberAddressByAddressId?addressId="+$(this).prev().prev().prev().val(),function() {
				   window.top.location.href="/personalAddress/personalAddressPage";
			   });
			});

			//保存按钮绑定事件
			$("body").on("click", "#saveBtn", function () {
				var data = form.val("addressForm");
				if (data.phone == null || data.phone == "") {
					layer.msg("联系方式不能为空!");
					return false;
				}else if(data.province=="" || data.city=="" || data.area=="" || data.address==""){
					layer.msg("请完善您的收货地址!");
					return false;
				}
				$.post("/memberAddress/saveMemberAddress", data, function () {
					window.top.location.href="/personalAddress/personalAddressPage";
				});
			});

			//给删除地址绑定事件
			$(".delAddress").on("click",function (){
				var $this = $(this);
				layer.confirm("确认删除吗？",function (){
					$.post("/memberAddress/delAddressByAddressId?addressId="+$this.prev().val(),function (){
						window.location.href="/personalAddress/personalAddressPage";
					});
				});
			});

		});
	</script>
	</body>
</html>
